<template>
	<es-view v-if="item.right.type === 'text'" :class="{ disabled: item.right.disabled }" v-bind="config" @click="rightClick">{{item.right.text}}</es-view>
	<es-button v-else-if="item.right.type === 'button'" v-bind="config" @click="rightClick">{{item.right.text}}</es-button>
	<es-text v-else-if="item.right.type === 'icon'" v-bind="config" @click="rightClick"></es-text>
</template>

<script>
	export default {
		props: ['item'], // 表单项
		data() {
			return {
				config: {}
			}
		},
		created() {
			this.config = {
				class: this.item.right.cls || [],
				style: this.item.right.style || {},
				disabled: this.item.right.disabled,
				cls: this.item.right.cls || []
			}
			switch (this.item.right.type) {
				case 'button':
					this.config.class = this.config.class.concat('cu-btn'); break;
				case 'icon':
					this.config.class = this.config.class.concat(`cuIcon-${this.item.right.name}`);
					// 默认单位是rpx
					this.config.style.fontSize = typeof this.item.right.size === 'number' ?
						`${this.item.right.size}rpx` : this.item.right.size
					this.config.style.color = this.item.right.color
					break;
				case 'text':
				
			}
		},
		methods: {
			rightClick(e) {
				if (this.item.right.disabled) return
				this.item.right.click(this.item.right, e)
			}
		}
	}
</script>

<style>
</style>
